<template>
  <div class="model-con">
    <div class="title">工作纪实</div>
    <div class="sub-title">季度总结提交情况（人）</div>
    <ul class="num-list">
      <li class="num-li" @click="onShowDialog(1)">
        <p class="val">{{ shallBeSubmitted || 0 }}</p>
        <p class="label">应提交</p>
      </li>
      <li class="num-li" @click="onShowDialog(2)">
        <p class="val">{{ hasBeenSubmitted || 0 }}</p>
        <p class="label">已提交</p>
      </li>
      <li class="num-li" @click="onShowDialog(3)">
        <p class="val val-red">{{ haveNotBeenSubmitted || 0 }}</p>
        <p class="label">未提交</p>
      </li>
    </ul>
    <!-- 季度总结提交情况 开始-->
    <XnDialog
      custom-class="branch_dialog"
      title="季度总结提交情况"
      :visible.sync="dialogShow"
      @close="dialogShow = false">
      <el-tabs v-model="activeName" @tab-click="handleClickTabs">
        <el-tab-pane :label="'已提交(' + hasBeenSubmitted + ')'" name="1"></el-tab-pane>
        <el-tab-pane :label="'未提交(' + haveNotBeenSubmitted + ')'" name="2"></el-tab-pane>
      </el-tabs>
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        height="400"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        highlight-hover-row
        header-align="center"
        align="center">
        <!-- :header-cell-class-name="headerStyle"
      :row-class-name="rowClass" -->
        <vxe-column field="name" title="人员" min-width="120" fixed="left"></vxe-column>
        <vxe-column field="orgName" title="部门" min-width="120"></vxe-column>
        <vxe-column field="status" title="提交情况" min-width="120">
          <template #default="{ row }">
            <!-- 状态 0未生成 1未提交 2已提交 -->
            <span v-if="row.status == '2'">已提交</span>
            <span v-else-if="row.status == '1'" class="redColor">未提交</span>
            <span v-else-if="row.status == '0'" class="redColor">未生成</span>
          </template>
        </vxe-column>
        <vxe-column
          field="endDate"
          title="操作"
          min-width="120"
          v-if="isShowWarnPerson && activeName === '2'"
          key="oper">
          <template #default="{ row }">
            <!-- 状态 0未生成 1未提交 2已提交 -->
            <!-- <el-button v-if="row.status == '2'" class="btnText" type="text" @click="onleaderBoardSee(row)">
              查看
            </el-button> -->
            <el-button
              v-if="row.status == '1' && row.isUrge == '1'"
              class="btnText"
              type="text"
              @click="warnPerson(row)">
              催报
            </el-button>
            <el-button v-if="row.status == '1' && row.isUrge == '0'" class="btnText" type="text" disabled>
              已催报
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </XnDialog>
    <!-- 季度总结提交情况 结束-->
  </div>
</template>

<script>
import { workDocumentaryStatistical } from '@api/modules/api-staAnalysis.js'
import { saveUrgeByNeedDeal } from '@api/modules/evaluation.js'
import XnDialog from '@com/xnDialog.vue'

export default {
  name: 'WorkDocumentary',
  components: { XnDialog },
  props: {
    selectParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeName: '1',
      dataDetails: [],
      tableData: [],
      tablePage: {
        pageNum: 1,
        pageSize: 20,
        totalSize: 0,
      },
      dialogShow: false,
      hasBeenSubmitted: '',
      haveNotBeenSubmitted: '',
      shallBeSubmitted: '',
      pageCode: this.$route.query.code,
      isShowWarnPerson: true,
    }
  },
  watch: {
    selectParams: {
      handler(newValue, oldValue) {
        if (newValue.quarter && newValue.year && newValue.orgId) {
          this.$nextTick(() => {
            this.pageInit()
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    /* 根据链接code判断角色 */
    if (this.pageCode && this.pageCode.indexOf('STATISTICAL_MANAGE') !== -1) {
      this.isShowWarnPerson = false
    } else {
      this.isShowWarnPerson = true
    }
    this.pageInit()
  },
  methods: {
    async pageInit() {
      if (this.selectParams.quarter && this.selectParams.year && this.selectParams.orgId) {
        const { data } = await workDocumentaryStatistical({
          ...this.selectParams,
        })
        const { hasBeenSubmitted, haveNotBeenSubmitted, shallBeSubmitted, dataDetails } = data
        this.hasBeenSubmitted = hasBeenSubmitted
        this.haveNotBeenSubmitted = haveNotBeenSubmitted
        this.shallBeSubmitted = shallBeSubmitted
        this.dataDetails = dataDetails
      }
    },
    onShowDialog(type) {
      if (type === 3) {
        this.activeName = '2'
      } else {
        this.activeName = '1'
      }
      this.handleClickTabs()
      this.dialogShow = true
    },
    /* 切换 */
    handleClickTabs() {
      if (this.activeName === '1') {
        this.tableData = this.dataDetails.filter(item => item.status === '2')
      } else if (this.activeName === '2') {
        this.tableData = this.dataDetails.filter(item => item.status !== '2')
      }
    },
    /* 查看跳转到纪实本 */
    onleaderBoardSee(row) {
      this.$router.push({
        path: '/leaderBoard',
        query: {
          userId: row.userId,
          recordType: '01-03',
        },
      })
    },
    // 催报
    warnPerson(row) {
      this.$confirm('您确定要进行催报吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.saveUrgeData(row)
        })
        .catch(() => {})
    },
    // 催报方法
    saveUrgeData(row) {
      saveUrgeByNeedDeal({
        type: 1, // 催报类型：1单条 2全部
        urgeUserId: row.userId,
        needId: row.needId,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '催报成功',
            type: 'success',
          })
          row.isUrge = '0'
        }
      })
    },
    /* 分页切换 */
    onPageChange(obj) {
      this.tablePage.pageNum = obj.pageNumber
      this.tablePage.pageSize = obj.pageSize
      this.initdata()
    },
  },
}
</script>

<style lang="scss" scoped>
.model-con {
  border: 1px solid #ebeef5;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .sub-title {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
  .num-list {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    .num-li {
      text-align: center;
      cursor: pointer;
      .val {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        &.val-red {
          color: #b61213;
        }
      }
      .label {
        color: #666;
        font-size: 14px;
      }
      &:hover {
        .val {
          text-decoration-line: underline;
          color: #0957af;
        }
      }
    }
  }
}
.redColor {
  color: #b61213;
}
</style>
